import React,{useState,useEffect} from 'react'
import { Input,Button,Table,Modal,Checkbox, Form } from 'antd';
import styles from "./ShopClass.module.css"
import "../../pages/ShopClass/ShopClass.css"
import myAxios from "../../utils/myAixos"
let ShopId=undefined
let idArr=undefined
const App = () => {
  let [data,setData]=useState();
//表格数据
const columns = [
  {
    title: '分类名称',
    dataIndex: 'p_name',
    align:"center"
  },
  {
    title: '器材价格',
    dataIndex: 'p_money',
    align:"center"
  },
  {
    title: '状态',
    dataIndex: 'p_status',
    align:"center"
  },
   {
      title:"操作",
      align:"center",
      render:(_, record,index) => (
          <div className={styles["option"]}> <span onClick={()=>{edit(record)}}>编辑</span>   <span onClick={()=>{del(record,index)}}>删除</span></div>
         
      )
   }
];
  //获取表格数据的函数
   const shopData=()=>{
           myAxios({
               url:"/getShopData",
               method:"post"

           }).then(res=>{
           if(res.data.status===200){
            for (let i = 0; i <res.data.data.length; i++) {
              res.data.data[i].key = res.data.data[i].p_id;
            }            
            data=setData(res.data.data)
           }else{
               //到404页面
           }
           })
   }

  useEffect(()=>{
     shopData()
     
  },[])
//编辑对应表单的内容

 //编辑部分
 const edit=(row)=>{
  ShopId=row.p_id
  
  setOpen(true);
     
}
const onFinishs = (values) => {

    
     myAxios({
         url:"/ShopClassEdit",
         method:"post",
         data:{
          p_name:values.p_name,
          p_money:values.p_money,
          p_status:values.use,
          p_id:ShopId
         }
     }).then(res=>{ 
        console.log(res)
      if(res.data.status===200){
        shopData() 
    }else{
        //到404页面
        console.log("oo")
    } 
     })
  setOpen(false);
  
};
//添加部分表单成功的内容
const onFinished = (values) => {
  
      myAxios(
        {
          url:"/ShopClassAdd",
           method:"post",
           data:{
             p_name:values.p_name,
             p_money:values.p_money,
             p_status:values.use

           }
        }
      ).then(res=>{
        if(res.data.status===200){
             shopData() 
         }else{
             //到404页面
         } 
          
      }
          
      )

  setOpens(false);
  




};

  //添加部分
  const add=()=>{
    setOpens(true);  
      
  }
  // const addFrom=useState(undefined)

  //删除部分
 
  const del=(row,index)=>{      
      const newData = data.filter((item) => item.p_id !==row.p_id);
      data= setData(newData)
             

          myAxios({
            url:"/del",
            method:"post",
            data:{
                p_id:row.p_id
            }
          }).then(res=>{
            if(res.data.status===200){

      
          }else{
              //到404页面
          } 
          })
  }
  //查询部分
 let [searchVal]=useState()
const getVal=(e)=>{
     searchVal=e.target.value
}

 const search=()=>{
   if(searchVal==""){
    shopData()  
   }else{
    myAxios({
      url:"/search",
      method:"post",
      data:{
       searchVal:searchVal
      }
  }).then(res=>{
   if(res.data.status===200){
     for (let i = 0; i <res.data.data.length; i++) {
       res.data.data[i].key = res.data.data[i].p_id;
     }            
       setData(res.data.data)
 }else{
     //到404页面
 }    
      
  })
 
   }
   

  }
 



 

// for (let i = 0; i < 46; i++) {
//   data.push({
//     key: i,
//     p_name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//     id:1
//   });
// }
const [opens, setOpens] = useState(false);
 const [open, setOpen] = useState(false);
 const [confirmLoading, setConfirmLoading] = useState(false);
 const handleOks = () => {
  setConfirmLoading(true);
  setTimeout(() => {
    setOpen(false);
    setConfirmLoading(false);
  }, 1000);
};
const handleCancels = () => {
  console.log('Clicked cancel button');
  setOpens(false);
};


 const handleOk = () => {
   setConfirmLoading(true);
   setTimeout(() => {
     setOpen(false);
     setConfirmLoading(false);
   }, 1000);
 };
 const handleCancel = () => {
   console.log('Clicked cancel button');
   setOpen(false);
 };


  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);

  // let [idArr]=useState()
    
  const onSelectChange = (newSelectedRowKeys) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    // idArr=newSelectedRowKeys
    // console.log(idArr,897)
    idArr=[...newSelectedRowKeys]
    setSelectedRowKeys(newSelectedRowKeys);
     
       
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  //进行批量删除
  const start = () => {
       let  newArr=[...data]
       console.log(newArr)
       for(let j=0;j<idArr.length;j++){
            for(let i=0;i<newArr.length;i++){
              if(newArr[i].p_id==idArr[j]){
                            
                  newArr.splice(i,1)
              
          }
       }
      }
        setData(newArr)
      

    
     myAxios({
          url:"/anyDel",
          method:"post",
          data:{
             idArr:idArr
          }
     }).then(res=>{
      if(res.data.status===200){
              
    }else{
        //到404页面
    }     
     })
  
  
  
  setLoading(true);
  // ajax request after empty completing
  setTimeout(() => {
    setSelectedRowKeys([]);
    setLoading(false);
  }, 1000);
};
  return (
    <div>
      {/* 商品添加 */}
 <div>
 <Modal
        title="商品添加"
        open={opens}
        onOk={handleOks}
        confirmLoading={confirmLoading}
        onCancel={handleCancels}
        footer={false}
        className={styles["modal"]}
      >
        <Form
    
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      use: true,
    }}
    onFinish={onFinished}
    autoComplete="off"
  >
    <Form.Item
      label="分类名称"
      name="p_name"
      rules={[
        {
          required: true,
          message: '请输入器材分类名称',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="器材价格"
      name="p_money"
      rules={[
        {
          required: true,
          message: '输入器材价格',
        },
      ]}
    >
      <Input/>
    </Form.Item>

    <Form.Item
      name="use"
      valuePropName="checked"
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Checkbox>是否使用(选中表示使用)</Checkbox>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit" className={styles["btn"]}>
      保存
      </Button>
    </Form.Item>
  </Form>
      </Modal>
 </div>
         
        <div>
        <Modal
        title="商品编辑"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={false}
        className={styles["modal"]}
      >
        <Form
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      use: true,
    }}
    onFinish={onFinishs}
    autoComplete="off"
  >
    <Form.Item
      label="分类名称"
      name="p_name"
      rules={[
        {
          required: true,
          message: '请输入器材分类名称',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="器材价格"
      name="p_money"
      rules={[
        {
          required: true,
          message: '输入器材价格',
        },
      ]}
    >
      <Input/>
    </Form.Item>

    <Form.Item
      name="use"
      valuePropName="checked"
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Checkbox>是否使用(选中表示使用)</Checkbox>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit" className={styles["btn"]}>
      保存
      </Button>
    </Form.Item>
  </Form>
      </Modal>
        </div>
         <div className={styles["top"]}>
         <Input placeholder="标题关键字"  onChange={getVal} />      
         <Button type="primary" className={styles["search"]} onClick={search} >
         查询
         </Button> 
         <Button type="dashed" onClick={add}>
        添加
         </Button>
         </div>
        
      <div>
        <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading} className={styles["anyDel"]}>
        批量删除
        </Button>
      </div>
      <div className='table-div '>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
      </div>
     
    </div>
  );
};
export default App;